<template>
  <div class="table-box">
    <ProTable
      ref="proTableBox"
      :load="loadDataGrid"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :columns="dataGrid.columns"
      :init-param="dataGrid.initParam"
      :request-api="taskFindPageList"
      :data-callback="dataCallBack"
      @cell-click="openDrawer"
      @expand-change="expandChange"
      lazy
    >
      <template #tableHeader>
        <GlobalButton :button-list="dataGrid.headButtonList"></GlobalButton>
      </template>

      <template #operation="{ row }">
        <GlobalButton :button-list="dataGrid.rowButtonList" :row-params="row"></GlobalButton>
      </template>
    </ProTable>

    <mDrawer :visible="true" :is-close="drawerData.isClose" size="60%">
      <template #content>
        <el-tabs v-model="drawerData.activeName" class="self-adaption-tabs" @tab-click="switchoverTabs">
          <!-- 来料明细 -->
          <el-tab-pane label="任务明细" name="detail">
            <ProTable
              ref="dataDetailBox"
              :request-auto="false"
              :columns="detailData.columns"
              :init-param="detailData.initParam"
              :pagination="false"
              :request-api="taskDetailFindList"
            >
              <template #tableHeader>
                <GlobalButton :button-list="detailData.headButtonList"></GlobalButton>
              </template>

              <template #operation="{ row }">
                <GlobalButton :button-list="detailData.rowButtonList" :row-params="row"></GlobalButton>
              </template>
            </ProTable>
          </el-tab-pane>
        </el-tabs>
      </template>
    </mDrawer>

    <!-- 打开表单 -->
    <DialogForm
      :width="addForm.width"
      :options="addForm.options"
      :title="addForm.title"
      :form-attrs="addForm.formAttrs"
      v-model:visible="addForm.visible"
      @get-model="form => (addForm.form = form)"
      @submit-form="addForm.commitForm"
    ></DialogForm>

    <!-- 任务明细表单 -->
    <DialogForm
      :width="addDetailForm.width"
      :options="addDetailForm.options"
      :title="addDetailForm.title"
      :form-attrs="addDetailForm.formAttrs"
      v-model:visible="addDetailForm.visible"
      @get-model="form => (addDetailForm.form = form)"
      @submit-form="addDetailForm.commitForm"
    ></DialogForm>
  </div>
</template>

<script setup lang="ts">
import { ProTableInstance } from '@/components/ProTable/interface';

import { taskFindPageList, taskDetailFindList } from '$api/task';

import { useDataGrid } from './hooks/use-dataGrid';
import { useDetailData } from './hooks/use-detailData';

const proTableBox = ref<ProTableInstance>();
const dataDetailBox = ref<ProTableInstance>();

// 刷新对应表格数据
const refreshTableData = () => {
  switch (drawerData.activeName) {
    case 'detail':
      detailData.initParam.taskId = drawerData.row.id;
      break;
  }
};

const { drawerData, switchoverTabs, openDrawer } = useDrawerData(refreshTableData, 'detail');
const { dataGrid, addForm, loadDataGrid, dataCallBack, expandChange } = useDataGrid(proTableBox);
const { detailData, addDetailForm } = useDetailData(dataDetailBox, drawerData);
</script>
